<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>网站基本信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card" style="width: 60%;">
        <div slot="header" class="clearfix">
          <span>网站信息</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="update">修改</el-button>
        </div>
        <div>
          <el-row>
            <el-col :span="24">
              <span>网站LOGO：</span>
              <img style="width: 140px; height: 140px;margin-left: 100px" v-if="wbbase.logo.length!=0" :src="'/api/finance-service-cms/wbbase/download/'+wbbase.logo" class="avatar">
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <span>网站title：</span>
              <el-button type="primary" plain size="medium">{{wbbase.title}}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <span>网站介绍：</span>
              <el-button type="primary" plain>{{wbbase.content}}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <span>联系邮箱(网站底部)：</span>
              <el-button type="primary" plain>{{wbbase.email}}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <span>联系电话(网站底部)：</span>
              <el-button type="primary" plain>{{wbbase.tel}}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <span>版权以及备案号(网站底部)：</span>
              <el-button type="primary" plain>{{wbbase.copyright}}</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-dialog
        title="修改信息"
        :visible.sync="DialogVisible"
        center :close-on-click-modal="false" @closed="crearbase">
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col>
              <el-form-item label="网站LOGO:" label-width="100px">
                <el-upload
                  class="avatar-uploader"
                  action="/api/finance-service-cms/wbbase/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="wbbase.logo.length!=0" :src="'/api/finance-service-cms/wbbase/download/'+wbbase.logo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="网站title:" label-width="100px">
                <el-input v-model="wbbase.title"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="网站介绍:" label-width="100px">
                <el-input v-model="wbbase.content"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="网站邮箱:" label-width="100px">
                <el-input v-model="wbbase.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="网站联系电话:" label-width="100px">
                <el-input v-model="wbbase.tel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="网站版权:" label-width="100px">
                <el-input v-model="wbbase.copyright"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="DialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addwbbase()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Wzjbxx",
      data(){
          return{
            wbbase:{logo:''},
            DialogVisible:false
          }
      },
      methods:{
        handleAvatarSuccess(res, file) {
          this.wbbase.logo=file.response.result.path;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        crearbase:function(){
          this.wbbase={};
          this.search();
        },
        addwbbase:function(){
          this.$http.post("/finance-service-cms/wbbase/addwbbase",this.wbbase).then(
            (res)=>{
              if(res.data.success){
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
                this.DialogVisible=false;
                this.wbbase={};
                this.search();
              }else{
                this.$message.error(res.data.message);
              }
            }
          );
        },
        update:function(){
          this.DialogVisible=true;
        },
        search:function () {
          this.$http.get("/finance-service-cms/wbbase/findwbbase").then(
            (res)=>{
              if(res.data.success){
                this.wbbase=res.data.result;
              }else{
                this.$message.error(res.data.message);
              }
            }
          );
        }
      },
      mounted() {
          this.search();
      }
    }
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
